<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        background="#f1f1f1"
        :input-align="iscenter"
        placeholder="请输入小区或地址"
        @search="onSearch"
        @cancel="$router.back()"
        @focus="iscenter='left'"
        @blur="iscenter='center'"
        @input="inputFn"
      />
    </form>
    <van-cell-group v-if="communityList.length !== 0">
      <van-cell
      v-for="item in communityList"
      :key="item.community"
      :title="item.communityName"
      @click="clickFn(item)"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { getCommunityApi } from '@/api'
export default {
  data () {
    return {
      value: '',
      iscenter: 'center',
      timer: null,
      communityList: []
    }
  },
  methods: {
    clickFn (item) {
      this.$router.push({
        path: '/rentadd',
        query: item
      })
    },
    inputFn () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getCommunityInfo()
      }, 500)
    },
    onSearch () {
      this.getCommunityInfo()
    },
    async getCommunityInfo () {
      if (this.value.length === 0) {
        this.communityList = []
        return
      }
      this.$toast.loading()
      const res = await getCommunityApi({
        name: this.value,
        id: this.$store.state.city.value
      })
      console.log(res)
      this.communityList = res.data.body
      this.$toast.clear()
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
